<template>
  <div class='message-list-container'>
    <!-- <h2 class="title">
      动态
    </h2> -->
    <!-- <vue-seamless-scroll :data="messageList.list"
                         style="overflow:hidden;height:680px"
                         class="seamless-warp"> -->
    <!-- <ul class="message-list">
      <li class="message-item"
          v-for="(item, index) in messageList.list"
          :key="index">
        <img src="../../../assets/message-icon.png"
             alt="">
        <div class="detail">
          <p>
            {{item.dynamicContenList[0]}}
            <span @click="goPage(item)">{{item.operate_name}} </span>
            {{item.dynamicContenList[1]}}
          </p>
          <span class="time">{{item.updated_at}}</span>
        </div>
      </li>
    </ul> -->
    <!-- </vue-seamless-scroll> -->
    <div class="tab">
      <div class="tabContent">
        <el-tabs v-model="activeName"
                 @tab-click="handleClick">
          <el-tab-pane label="通知待办"
                       name="first">
            <ul>
              <li v-for="(item,index) in noticeWait.list"
                  :key="index">
                <i class="yuan"
                   v-if="!item.readStatus"></i>
                <div class="contentOne"
                     @click="details(item)">{{ item.content }} </div>
                <div class="contentTwo">{{item.msgTime}}</div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="预警/报警"
                       name="second">
            <ul>
              <li v-for="(item,index) in forewarnForm.list"
                  :key="index">
                <i class="yuan"
                   v-if="!item.readStatus"></i>
                <div class="contentOne"
                     @click="details2(row)">{{ item.content }}</div>
                <div class="contentTwo">{{item.msgTime}}</div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="新闻公告"
                       name="third">
            <ul>
              <li class="contentList"
                  v-for="(item,index) in newsList.list"
                  :key="index">
                <i class="yuan"
                   v-if="!item.readStatus"></i>
                <div class="contentOne"
                     @click="detailsNews(item,index)"> {{item.title}}</div>
                <div class="contentTwo">{{item.articleTime}}</div>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
        <span @click="more">更多</span>
      </div>
    </div>
    <!-- <div class="View">
      <div>未阅</div>
      <div class="Read">已阅</div>
  </div> -->
    <!-- 消息弹框 -->
    <el-dialog :visible.sync="detailsWindow"
               :append-to-body="true"
               @close="detailsWindows">
      <el-form :model="detailsForm">
        <el-form-item label="消息时间:"
                      label-width="120px">
          <p> {{detailsForm.msgTime}}</p>
        </el-form-item>
        <el-form-item label="消息来源:"
                      label-width="120px">
          <p>{{ detailsForm.resource }}</p>
        </el-form-item>
        <el-form-item label="消息内容:"
                      label-width="120px">
          <div style="border:1px solid black; height:100px;color:#1890ff;margin-bottom:10px;">{{ detailsForm.content }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="detailsWindows ">取 消</el-button>
        <el-button type="primary"
                   @click="detailsWindowSure">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 预警/报警弹框 -->
    <el-dialog :visible.sync="forewarnWindow"
               :append-to-body="true"
               @close="forewarnWindowCancel">
      <el-form :model="forewarnFormList">
        <el-form-item label="消息时间:"
                      label-width="120px">
          <p> {{forewarnFormList.msgTime}}</p>
        </el-form-item>
        <el-form-item label="消息来源:"
                      label-width="120px">
          <p>{{ forewarnFormList.resource }}</p>
        </el-form-item>
        <el-form-item label="风险类型:"
                      label-width="120px">
          <p>{{ forewarnFormList.warnType?'预警':'报警' }}</p>
        </el-form-item>
        <el-form-item label="风险数据:"
                      label-width="120px">
          <p>{{ forewarnFormList.warnData }}</p>
        </el-form-item>
        <el-form-item label="消息内容"
                      label-width="120px">
          <div style="border:1px solid black; height:100px;color:#1890ff;margin-bottom:10px;">{{ forewarnFormList.content }}</div>
        </el-form-item>
        <el-form-item label="处理回复"
                      label-width="120px">
          <div style="border:1px solid black; height:100px;color:#1890ff;">{{ forewarnFormList.dealReply }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="forewarnWindowCancel ">取 消</el-button>
        <el-button type="primary"
                   @click="forewarnWindowSure">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新闻弹框 -->
    <el-dialog :visible.sync="newsWindow"
               :append-to-body="true"
               @close="newsFormShut">
      <el-form :model="newsForm">
        <el-form-item label="消息时间:"
                      label-width="120px">
          <p> {{newsForm.articleTime}}</p>
        </el-form-item>
        <el-form-item label="消息来源:"
                      label-width="120px">
          <p>新闻公告</p>
        </el-form-item>
        <el-form-item label="消息内容:"
                      label-width="120px">
          <div style="border:1px solid black;color:#1890ff;margin-bottom:10px;">
            <!-- <h4 style="text-align: center;">{{newsForm.title  }}</h4>
            <div class="img"
                 style="width:100%;height:400px"
                 v-if="newsForm.articleImg"><img style="width:100%;height: 100%;"
                   :src="newsForm.articleImg"
                   alt=""></div> -->

            <div v-html="newsForm.content"></div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="newsWindowCancel">取 消</el-button>
        <el-button type="primary"
                   @click="newsWindowSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { HomeApi } from '@/services/Home'
import { MessageCenterApi } from '@/services/ProjectCenter';
import { CulManagePartyBuildApi } from "@/services/WorkCenter";
import moment from 'moment'
export default {
  data () {
    return {
      activeName: 'first',
      messageList: {
        list: []
      },
      requestparam: {
        is_page: 0,
        msgType: 0,
      },
      requestparam2: {
        is_page: 0,
        msgType: 1,
      },
      newsList: {},
      noticeWait: {},
      forewarnFormList: {},
      one: true,
      // 业务类型标准码
      actionCode: [],
      detailsWindow: false,
      forewarnWindow: false,
      newsWindow: false,
      detailsForm: {},
      forewarnForm: {},
      newsForm: {}
    }
  },
  methods: {
    getMessageList () {
      HomeApi.getMessageList({
        params: {
          limit: 30
        }
      }).then(res => {
        if (res.code === 0) {
          let list = res.data.list
          list.map((item) => {
            item.dynamicContenList = item.dynamic_content.split('operate_name')
          })
          this.messageList.list = list;
        }
      })
    },
    // 获取新闻公告列表
    getNewsNotice () {
      CulManagePartyBuildApi.getNewsListTwo({
        is_page: 0
      }).then(res => {
        if (res.code === 0) {

          this.newsList = res.data
          this.newsList.list.map((item) => {
            item.articleTime = moment(item.articleTime).format('YYYY-MM-DD')
          })

        }
      }).catch((err) => {
        console.log(err);
      })
    },
    // 获取通知待办列表
    getNoticeWait () {
      MessageCenterApi.getForewarnList({
        params: this.requestparam
      }).then((res) => {
        if (res.code == 0) {

          this.noticeWait = res.data;
          if (this.noticeWait.list) {
            this.detailnoticeWaitsForm.list.forEach((item) => {
              let moment = require('moment');
              let t1 = moment(item.msgTime).format('YYYY-MM-DD HH:mm:ss');
              item.msgTime = t1
            })
          }
        }

      }).catch((error) => {
        console.log(error)
      });
    },
    // 获取预警报警记录
    getforewarn () {
      MessageCenterApi.getForewarnList({
        params: this.requestparam2
      }).then((res) => {
        if (res.code == 0) {

          this.forewarnForm = res.data;
          if (this.forewarnForm.list) {
            this.forewarnForm.list.forEach((item) => {
              let moment = require('moment');
              let t1 = moment(item.msgTime).format('YYYY-MM-DD HH:mm:ss');
              item.msgTime = t1
            })
          }
        }

      }).catch((error) => {
        console.log(error)
      });
    },
    // 跳转页面
    goPage (item) {
      // // 判断是上传文件动态时，弹新页面
      if (item.action_type === 'xmscfa') {
        window.open(item.url_route)
      } else {
        this.$router.push({
          path: item.route_url, query: { project_id: item.project_id, project_name: item.project_name }
        })
      }

    },
    handleClick (tab, event) {

    },
    // 点击详情
    details (row) {
      this.detailsForm = row;
      this.detailsWindow = true;
      MessageCenterApi.alterMessageForewarn({
        data: {
          readStatus: true,
          msgType: 0,
          companyId: row.companyId
        }
      }).then(res => {
        if (res.code === 0) {

        }
      }).catch((err) => {
        console.log(err);
      })
    },
    details2 (row) {
      this.forewarnFormList = row;
      this.detailsWindow = true;
      MessageCenterApi.alterMessageForewarn({
        data: {
          readStatus: true,
          msgType: 1,
          companyId: row.companyId
        }
      }).then(res => {
        if (res.code === 0) {

        }
      }).catch((err) => {
        console.log(err);
      })
    },
    detailsNews (row) {

      this.newsWindow = true;
      this.newsForm = row
      let img = this.newsForm.articleImg.split(',')
      this.newsForm.articleImg = img[0]

      row.readStatus = true
      // CulManagePartyBuildApi.addEditNews({
      //   data: {
      //     readStatus: true,
      //     articleLibraryId: row.articleLibraryId
      //   }
      // }).then(res => {
      //   if (res.code === 0) {

      //   }
      // }).catch((err) => {
      //   console.log(err);
      // })
    },
    newsFormShut () {
      this.newsWindow = false
      this.getNewsNotice()
    },
    newsWindowCancel () {
      this.newsWindow = false
      this.getNewsNotice()
    },
    newsWindowSure () {
      this.newsWindow = false
      this.getNewsNotice()
    },
    detailsWindows () {
      this.detailsWindow = false
      this.getNoticeWait()
    },
    detailsWindowSure () {
      this.detailsWindow = false
      this.getNoticeWait()
    },
    forewarnWindowCancel () {
      this.forewarnWindow = false
      this.getforewarn()
    },
    forewarnWindowSure () {
      this.forewarnWindow = false
      this.getforewarn()
    },
    more () {

      if (this.activeName == "first") {
        this.$router.push("/NoticeWait")
      } else if (this.activeName == "second") {
        this.$router.push("/AlarmRecord")
      } else if (this.activeName == "third") {
        this.$router.push("/culManagePartyBuild")
      }
    }
  },
  created () {
    this.getMessageList()

  },
  mounted () {
    this.getNewsNotice()
    this.getNoticeWait()
    this.getforewarn()
  }
}
</script>
<style scoped lang='scss'>
// .message-list-container {
//   overflow: hidden;
//   width: 100%;
//   height: 100%;
//   background-color: #fff;
//   .title {
//     height: 54px;
//     display: flex;
//     padding: 20px;
//     justify-content: space-between;
//     align-items: center;
//     font-size: 16px;
//     color: #333;
//     border-bottom: 1px solid #d8d8d8;
//     font-weight: normal;
//     span {
//       font-size: 14px;
//       color: #1890ff;
//       cursor: pointer;
//     }
//   }
//   .message-list {
//     padding: 20px;
//     background-color: #fff;
//     // height: 720px;
//     overflow-y: scroll;

//     .message-item {
//       width: 100%;
//       height: 105px;
//       // min-height: 108px;
//       padding: 20px;
//       display: flex;
//       justify-content: flex-start;
//       align-items: flex-start;
//       border-bottom: 1px solid #e5e5e5;

//       img {
//         width: 32px;
//         height: 32px;
//         border-radius: 50%;
//         margin-right: 16px;
//       }
//       .detail {
//         p {
//           font-size: 14px;
//           color: #333;
//           line-height: 22px;
//           margin-bottom: 8px;
//           height: 50px;
//           span {
//             color: #1890ff;
//             cursor: pointer;
//           }
//         }
//         .time {
//           font-size: 14px;
//           color: rgba($color: #000, $alpha: 0.45);
//         }
//       }
//     }
//   }
// }
.message-list-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #fff;
  .tab {
    padding: 20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .tabContent {
      position: relative;
      height: 100%;
      .el-tab-pane {
        ul {
          li {
            border-bottom: 1px solid black;
            height: 50px;
          }
        }
      }
      span {
        position: absolute;
        top: 0px;
        right: 0px;
        transform: translateY(50%);
        font-size: 14px;
        color: #1890ff;
        cursor: pointer;
      }

      .el-tabs {
        .el-tab-pane {
          ul {
            li {
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 12px;
              div {
                word-wrap: break-word;
                word-break: break-all;
              }
              .contentOne {
                color: #1890ff;
                width: 55%;
              }
              .contentTwo {
                width: 40%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
              }
              .contentTwos {
                width: 40%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
              }
              .contentThree {
                color: #1890ff;
                width: 10%;
              }
            }
          }
        }
      }
    }
  }
  .View {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    div {
      text-align: center;
      font-size: 16px;
      width: 50%;
      box-sizing: border-box;
      border: 1px solid #f2f2f2;
    }
    .Read {
      background-color: #c6c4c4;
    }
  }
}
.yuan::before {
  content: "\2022";
  color: red;
  font-size: 24px;
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
/deep/ .el-tabs__header {
  margin: 0;
}
</style>